<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <link rel="stylesheet" th:href="@{/css/common.css}" />
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/index.css}" />
    <title>中食链-认证</title>
</head>
<body>
    <!--黑色半透明背景-->
    <div class="blackLucency"></div>
    <!--申请确认弹框-->
    <div class="rel-box">
        <img th:src="@{/img/success.png}" alt="" />
        <h3>注册申请</h3>
        <a href="">确认</a>
        <p>资料提交成功，我们工作人员会对您提供的资料进行审核，审
            核日期1-3个工作日。期间请您耐心等待。</p>
    </div>
    <div th:include="~{/client/common/header :: header}"></div>
    <div class="applyContainer">
        <div class="center">
            <div class="topTitle">
                当前位置：<a href="">申请</a> > 申请检验
            </div>
            <form id="form-data" th:action="@{/register/registerVerify}" th:object="${registerVerify}" method="post" enctype="multipart/form-data">
                <table>
                    <tr>
                        <td><label>企业名称：</label></td>
                        <td><input type="text" th:field="*{companyName}" placeholder="请输入企业名称"></td>
                    </tr>
                    <tr>
                        <td><label>姓名：</label></td>
                        <td><input type="text" th:field="*{realName}" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td><label>证件类型：</label></td>
                        <td>
                            <select th:field="*{cardType}" class="form-control code-select" data-clazz="CardType" data-empty="请选择" data-th-value="*{cardType}">
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><label>证件号码：</label></td>
                        <td><input type="text" th:field="*{cardNo}" placeholder="请输入证件号"></td>
                    </tr>
                    <!--<tr>
                        <td><label>开户银行：</label></td>
                        <td><input type="text" placeholder="请输入开户银行" value="" /></td>
                    </tr>
                    <tr>
                        <td><label>开户支行：</label></td>
                        <td><input type="text" placeholder="请输入开户支行" value="" /></td>
                    </tr>
                    <tr>
                        <td><label>银行卡账号：</label></td>
                        <td><input type="text" placeholder="请输入银行卡账号" value="" /></td>
                    </tr>-->
                    <tr>
                        <td><label>公司所在地：</label></td>
                        <td>
                            <select th:field="*{province}">
                                <option value="">省份</option>
                                <option th:each="province, state: ${provinceList}" th:value="${province.areaCode}" th:text="${province.areaName}"></option>
                            </select>
                            <select th:field="*{city}">
                                <option value="">市区</option>
                                <option th:style="'display:' + @{(${cityName != null} ? 'block' : 'none')} + ''" th:value="*{city}" th:text="${cityName}" selected="selected"></option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="verticalTop"><label>上传法人身份证照片：</label></td>
                        <td>
                            <div>
                                <input type="hidden" th:field="*{cardFrontImg}" placeholder="">
                                <input style="display: none;" type="file" id="cardFrontImgUpload" name="cardFrontImgUpload" th:value="*{cardFrontImg}">
                                <!--<input type="button" onclick="cardFrontImgUploadFile();" value="上传">-->
                                <img id="cardFrontImg-img-preview" onclick="cardFrontImgUploadFile();" style="height: 100px; width: 200px;" th:src="*{cardFrontImg} != null ? @{/} + *{cardFrontImg} : @{/img/card1.png}" />
                            </div><br/>
                            <div>
                                <input type="hidden" th:field="*{cardBackImg}" class="text-input " value=""/>
                                <input style="display: none;" type="file" id="cardBackImgUpload" name="cardBackImgUpload" th:value="*{cardBackImg}">
                                <!--<input type="button" onclick="cardBackImgUploadFile();" value="上传">-->
                                <img id="cardBackImg-img-preview" onclick="cardBackImgUploadFile();" style="height: 100px; width: 200px;" th:src="*{cardBackImg} != null ? @{/} + *{cardBackImg} : @{/img/card2.png}" />
                            </div><br/>
                            <div>
                                <input type="hidden" th:field="*{cardHandImg}" placeholder="">
                                <input style="display: none;" type="file" id="cardHandImgUpload" name="cardHandImgUpload" th:value="*{cardHandImg}">
                                <!--<input type="button" onclick="cardHandImgUploadFile();" value="上传">-->
                                <img id="cardHandImg-img-preview" onclick="cardHandImgUploadFile();" style="height: 100px; width: 200px;" th:src="*{cardHandImg} != null ? @{/} + *{cardHandImg} : @{/img/card3.png}" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="verticalTop"><label>上传企业营业执照：</label></td>
                        <td>
                            <div>
                                <input type="hidden" th:field="*{businessLicenseImg}" class="text-input " value=""/>
                                <input style="display: none;" type="file" id="businessLicenseImgUpload" name="businessLicenseImgUpload" th:value="*{businessLicenseImg}">
                                <!--<input type="button" class="button"  onclick="businessLicenseImgUploadFile();" value="上传">-->
                                <img id="businessLicenseImg-img-preview" onclick="businessLicenseImgUploadFile();" style="height: 150px; width: 300px;" th:src="*{businessLicenseImg} != null ? @{/} + *{businessLicenseImg} : @{/img/group-company.png}" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="hinht">
                            <h2>*上传图片注意事项：</h2>
                            <p>上传的图片没有反光或是折痕<br />上传的图片为彩色图像<br />上传图片格式为 JPG、PNG、JPEG格式<br />图片大小不超过1MB</p>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="hidden" th:field="*{userId}"></td>
                        <td>
                            <p style="text-align: center; color: red;" th:text="${note}"></p>
                            <input class="Submit" type="button" id="form-submit" value="提交资料" />
                        </td>

                    </tr>
                </table>
            </form>
            <div class="error_msg" th:text="${msg}">
        </div>
    </div>
    <span th:text="${msg}"></span>




<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/misc.js}"></script>
<script th:src="@{/js/jquery.upload.js}"></script>


<script th:inline="javascript">
    var basePath = [[@{/}]];

    Misc.loadSelect("form-data", basePath + "/select/load");
    
    function cardHandImgUploadFile() {
        upload(function(data) {
            $("#cardHandImg").val(data);
            $("#cardHandImg-img-preview").attr("src", basePath + data);
        }, basePath);
    }

    function cardFrontImgUploadFile() {
        upload(function(data) {
            $("#cardFrontImg").val(data);
            $("#cardFrontImg-img-preview").attr("src", basePath + data);
        }, basePath);
    }

    function cardBackImgUploadFile() {
        upload(function(data) {
            $("#cardBackImg").val(data);
            $("#cardBackImg-img-preview").attr("src", basePath + data);
        }, basePath);
    }

    function businessLicenseImgUploadFile() {
        upload(function(data) {
            $("#businessLicenseImg").val(data);
            $("#businessLicenseImg-img-preview").attr("src", basePath + data);
        }, basePath);
    }

    $("#province").bind("change", function () {
        $.ajax({
            url: basePath + '/register/getArea',
            data: {
                pid:$("#province").val()
            },
            dataType: "json",
            type: 'POST',
            success: function(data) {
                if (data.success) {
                    $("#city").empty();
                    var obj = data.data;
                    for (var i = 0; i < obj.length; i++) {
                        $("#city").append("<option value='"+obj[i].areaCode+"'>"+ obj[i].areaName+"</option>");
                    }
                }
            }
        });
    });

    $(function(){
        $("#form-submit").on("click", function () {
            $.ajax({
                url: basePath + '/register/registerVerify',
                data: $("#form-data").serialize(),
                dataType: "json",
                type: 'POST',
                success: function(data) {
                    if (data.success) {
                        window.location.href = basePath + "login";
                    } else {
                        $(".error_msg").html(data.message);
                    }
                }
            });
        })
    });

</script>
</body>
</html>